<template>
    <div>
        <el-card shadow="never" class="box-card">
            <div class="exam-status subject">
                <span>学科名：</span>
                <!-- <el-radio-group v-model="queryForm.subjectId" size="small" @change="changeStatus">
                    <el-radio-button label="-1" class="btn">全部</el-radio-button>
                    <el-radio-button :label="item.value" class="btn" v-for="item in subjects" :key="item.value">{{ item.name}}</el-radio-button>
                </el-radio-group> -->
                <el-select v-model="queryForm.subjectId" style="width: 20%;" filterable remote reserve-keyword clearable placeholder="请选择学科">
                            <el-option style="text-align: center; " v-for="item in subjects" :key="item.value" :label="item.name" :value="item.value"></el-option>
                </el-select>  
                <el-button type="primary" class="el-btn" icon="el-icon-search" @click="getPageList"></el-button>
            </div>
        </el-card>
            <el-card shadow="never" class="options-card"  v-loading="loading"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)">
                <el-card class="card-option" shadow="hover" v-for="item in worngData" :key="item.id">
                    <h4 style="padding-bottom: 8px;">{{item.subjectName }}</h4>
                    <el-divider></el-divider>
                    <p class="exam-option">错题数：{{item.wrongCount}}</p>
                    <p style="padding-top: 30px; margin-left: 150px;">
                        <router-link :to="`/wrongBook/read?id=${item.id}`">查看</router-link>
                    </p>
                </el-card>
                <el-card shadow="never" v-if="worngData.length <= 0" class="no-option">
                        无错题
                </el-card>
            </el-card>
        <el-card class="box-card"  shadow="never" style="margin-top: -3px; border: none;" >
                <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="queryForm.pageIndex"
                    layout="prev, pager, next"
                    :total="total">
                </el-pagination>
            </el-card>
    </div>
</template>

<script>
import {getSubjects} from '@/api/subject/subject'
import { pageList } from '@/api/wrong/wrong';
export default {
    name:'WrongBook',
    data(){
        return{
            subjects:[],
            queryForm:{
                subjectId:null,
                pageIndex:1,
                pageSize:12
            },
            total:1,
            worngData:[],
            loading:false

        }
    },
    methods:{
        changeStatus(){
            this.getPageList();
        },
        handleCurrentChange(val){
            this.queryForm.pageIndex = val;
            this.getPageList();
        },
        async getSubjects(){
            let res = await getSubjects();
            this.subjects = res.data;
        },
        async getPageList(){
            this.loading = true;
            let res = await pageList(this.queryForm);
            this.worngData = res.data.records;
            this.total = res.data.total;
            this.loading = false;
        }
    },
    mounted(){
        // 初始化查询条件
        this.getSubjects();
        //初始化页面错题数据
        this.getPageList();
    }
}
</script>

<style scoped>
    *{
        margin: 0px;
        padding: 0px;
    }
    a{
        text-decoration: none;
        font-size: 14px;
        color: #409Eff;
    }
    .exam-status{
        margin: 0px auto -15px;
        padding-top: 5px;
        padding-bottom: 15px;
        font-size: 13px; 
        font-family:'宋体';  
        font-weight: bold;
    }
    
    .card-option{
        height: 204px; 
        width: 300px; 
        float: left;
        margin: 10px 10px 5px 10px;
    }
    .card-option:hover{
        background-image: url('@/assets/register/register2.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
    } 
    .exam-option{
        text-align: left;
        padding: 60px 0px 5px 10px;
        font-family: '宋体';

    }

    .box-card{
        margin-top: 5px;
        margin-bottom: 15px;
    }
    .no-option{
        border: none;
        min-height: 300px;
        text-align: center;
        line-height: 300px;
        color: gray;
        margin-top: -15px;
    }
    .options-card{
        margin-top: -15px;
        min-height: 400px;
    }
    .el-btn{
        width: 80px;
        height: 38px;
        border: none;
        margin-left: 15px;
    }
</style>